<%--
关注餐厅页面
显示某一个餐厅的菜品，店家的主页就是这个
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="col-md-9">
    <div class="data_list">
        <div class="data_list_title">
            <span class="iconfont icon-wodeguanzhu "></span>&nbsp;${shopName}
            <div class="mynav-right">共${interestNum}件相关商品</div>
        </div>
        <div class="mynav-content">
            <ul class="mynav"><li><a href="">价格<span>⬆</span></a></li><li><a href="">销量<span>⬇</span></a></li><li><a href="">评论<span>⬇</span></a></li></ul>
        </div>
        <%--所有菜品--%>
        <c:forEach items="${foodList}" var="food">
            <div class="myfood">
                <div class="myfoodcontent">
                    <div class="food-img-content">
                        <a class="food-a" href="/${food.foodId}">
                            <img class="food-img" src="../statics/images/food/${food.foodImg}">
                        </a>
                    </div>
                    <p class="food-price-content">
                        <span>￥</span>${food.foodPrice}
                    </p>
                    <div class="food-title-content">
                        <a href="${food.foodId}">${food.foodName}</a>
                    </div>
                    <div class="food-statue">
                        <span>月成交<em>${food.foodSale}+笔</em></span><span>评价<a href="${food.foodId}">${food.foodReport}</a></span>
                    </div>
                </div>
            </div>
        </c:forEach>
        <nav >
            <ul class="pagination  center">
                <%-- 如果当前不是第一页，则显示上一页的按钮，店铺的页面弄过来 --%>
                <li>
                    <a href=""><span>«</span> </a>
                </li>
                <%-- 导航页数 --%>
                <li>
                    <a href="">1</a>
                </li>
                <li class="active">
                    <a href="">2</a>
                </li>
                <li>
                    <a href="">3</a>
                </li>
                <%-- 如果当前不是最后一页，则显示下一页的按钮 --%>
                <li>
                    <a href="">
                        <span>»</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
</div>
<style>
    .mynav-content{
        width: 100%;
    }
    .mynav{
        list-style: none;
        padding-left: 0;
        display: flex;
        font-size: 12px;
        justify-content: end;
    }
    .mynav a{
        text-decoration: none;
    }
    .mynav li{
        padding: 12px 4px;
        border: 1px solid #f5f5f5;
        margin-right: 5px;
        margin-left: 5px;
    }
    .mynav li:hover{
        color: #ff0036 !important;
        cursor: pointer;
        background-color: #2aabd2;
    }
    .myfood{
        height: 300px;
        width: 220px;
        margin-right: 20px;
        margin-left: 20px;
        position: relative;
        float: left;
        padding: 0;
        overflow: visible;
        z-index: 1;
        font: 12px/1.5 tahoma,arial,"\5b8b\4f53";
    }
    .myfoodcontent{
        min-height: 98%;
        width: 210px;
        position: absolute;
        background-color: #fff;
        margin: 0;
        font-size: 0;
        border: 1px solid #f5f5f5;
        border-radius: 3px;
    }
    .food-img-content{
        width: 210px;
        height: 210px;
    }
    .food-a{
        text-align: center;
    }
    .food-img{
        display: block;
        margin: 0 auto;
        width: 100%;
        height: 210px;
        border: 0;
        padding: 0;
    }
    .food-price-content{
        font-family: arial,verdana,sans-serif !important;
        color: #ff0036;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px;
        letter-spacing: normal;
        overflow: inherit !important;
        white-space: nowrap;
        display: block;
        padding: 0;
    }
    .food-price-content span{
        margin-right: 2px;
        font-weight: 700;
        font-size: 14px;
    }
    .food-title-content{
        display: block;
        color: #666;
        height: 14px;
        line-height: 12px;
        margin-bottom: 3px;
        word-break: break-all;
        font-size: 0;
        position: relative;
        overflow: hidden;
    }
    .food-title-content a{
        color: #333;
        font-size: 12px;
        font-family: 微软雅黑;
        line-height: 14px;
        margin: 0;
        padding: 0;
    }
    .food-statue{
        position: relative;
        height: 37px;
        border: none;
        margin-bottom: 0;
        color: #999;
        display: block;
        overflow: hidden;
    }
    .food-statue span{
        white-space: nowrap;
        float: left;
        border-right: 1px solid #ccc;
        margin: 10px 1px;
        /*margin-right: 6px;*/
        padding: 2px;
        line-height: 12px;
        text-align: left;
        font-size: 12px;
        width: auto;
    }
    .food-statue a{
        color: #38b;
        margin-top: -8px;
        font-family: arial;
        font-size: 12px;
        font-weight: 700;
        text-decoration: underline;
    }
    .myfood a:hover {
        color: #ff0036 !important;
        cursor: pointer;
    }
    .center{
        width: 100%;
    }
    .food-statue em{
        color: #b57c5b;
    }
    nav .pagination{
        justify-content: center;
        display: flex;
    }
    .mynav-right{
        color: #999;
        right: 30px;
        line-height: 22px;
        height: 19px;
        overflow: hidden;
        position: absolute;
        display: inline-block;
    }
</style>